<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>小普马桶</title>
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
    <link rel="stylesheet" href="./css/lunbo_detail.css">
</head>
<body>
<!--轮播图片详情页-->
<header class="aui-row aui-bar-top">
    <div class="aui-iconfont aui-col-xs-2 aui-icon-left goHome top_width_item top_item"></div>
    <div class="aui-tab aui-col-xs-7" id="tab">
        <div class="aui-tab-item aui-active" id="shangpin">商品</div>
        <div class="aui-tab-item" id="pingjia">评价</div>
        <div class="aui-tab-item" id="xiangqing">详情</div>
    </div>
    <!--分享图标-->
    <div class="aui-iconfont aui-col-xs-2 aui-icon-share top_width_item top_item" onclick="openActionsheet()"></div>
</header>

<section class="padding-top-header">
<!--轮播-->
<div id="aui-slide2" >
    <div class="aui-slide-wrap" >
        <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content aui-padded-15">
               <span class="aui-text-success">
                    <img src="../../images/1.png" alt="">
                </span>
            </div>
        </div>
        <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content aui-padded-15">
                <span class="aui-text-success">
                    <img src="../../images/1.png" alt="">
                </span>
            </div>
        </div>
    </div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<div class="price">
    <div class="aui-flex-item-12 aui-border-l">
        <div class="aui-flex-col">
            <div class="aui-flex-item-8 aui-padded-t-15 aui-padded-l-15 aui-bg-info" style="position: relative;">
                <span>￥8.50</span>
                <span class="aui-font-size-12" style="text-decoration:line-through">$8.50</span>
                <span class="aui-font-size-12">已有4人购买</span>
            </div>
            <div class="aui-flex-item-4 aui-padded-10 aui-border-l aui-bg-pink">
                <p class=" aui-font-size-12 aui-margin-l-15">距结束还剩:</p>
                <p class="aui-font-size-12 aui-margin-l-15">00:00:00</p>
            </div>
        </div>
    </div>
</div>
<p class="aui-margin-l-15" style="margin-top:3.2rem">ABC甜睡夜用卫生巾</p>
   <h3 class="aui-margin-l-15 aui-margin-t-10 aui-margin-b-5">小普自营 | 正品保证</h3>
    <div class="aui-flex-col">
        <ul class="aui-flex-item-12">
            <li class="aui-flex-item-3 aui-margin-l-15">请选择颜色</li>
            <li class="aui-flex-item-1 aui-flex-offset-7 popUp">
                <i class="aui-iconfont aui-icon-right"></i>
            </li>
        </ul>
    </div>
        <div class="aui-flex-col aui-margin-t-5 options">
              <ul class="aui-flex-item-12">
                  <li class="aui-flex-item-4 aui-margin-l-15">
                      <img src="../../images/1.png" alt="">
                  </li>
                  <li class="aui-flex-item-6 aui-padded-t-15">
                      <div>￥398-418</div>
                      <div>库存 <span>198</span>件</div>
                      <div>请选择颜色分类</div>
                  </li>
                  <li class="aui-flex-item-1 aui-padded-l-15 closeBtn " >
                      <i  class=" aui-iconfont aui-icon-close"></i>
                  </li>
              </ul>
            <div class="aui-flex-item-12 aui-margin-l-15">颜色分类</div>
            <ul class="aui-flex-col aui-flex-item-12 aui-margin-l-15">
                <li class="aui-flex-item-2 aui-active"><input type="button" value="玫瑰金"></li>
                <li class="aui-flex-item-2"><input type="button" value="玫瑰金"></li>
                <li class="aui-flex-item-2"><input type="button" value="玫瑰金"></li>
            </ul>
            <div class="aui-flex-col aui-flex-item-12">
               <div class="aui-flex-item-3 aui-margin-l-15"> 购买数量</div>
                <div class="aui-bar aui-bar-btn aui-flex-item-3 aui-flex-offset-5" style="width:20%;" type="count" >
                    <div class="aui-bar-btn-item aui-font-size-14">
                        <i class="aui-iconfont aui-icon-minus"></i>
                    </div>
                    <div class="aui-bar-btn-item">
                        <input type="number" class="aui-input aui-text-center"  value="1">
                    </div>
                    <div class="aui-bar-btn-item aui-font-size-14">
                        <i class="aui-iconfont aui-icon-plus"></i>
                    </div>
                </div>
            </div>
            <div class="aui-flex-col aui-flex-item-12">
                <div class="aui-flex-item-6">  <p><div class="aui-btn aui-btn-primary aui-btn-block">加入购物车</div></p></div>
                <div class="aui-flex-item-6">  <p><div class="aui-btn aui-btn-primary aui-btn-block">立即购买</div></p></div>
            </div>
        </div>

<div class="aui-flex-item-12">
    <div class="aui-flex-col aui-margin-l-5">
        <div class="aui-flex-item-3 aui-padded-10" style="position: relative;">
            <input class= "aui-btn-danger aui-btn-sm" type="radio" checked>
            <span class="aui-text-warning">运费</span>
        </div>
        <div class="aui-flex-item-4 aui-padded-10 ">
            <img src="">
            <h5 class="aui-text-success">12小时发货</h5>
        </div>
        <div class="aui-flex-item-3 aui-padded-10 ">
            <img src="">
            <h5 class="aui-text-success">7天退货</h5>
        </div>
        <div class="aui-flex-item-1 aui-padded-10">
            <span class="aui-iconfont aui-icon-right"  onclick="openServe()"></span>
        </div>
    </div>
</div>
<!--用户评论-->
<div class="aui-flex-item-12  comment">
    <ul class="aui-flex-col aui-margin-l-15">
        <li class="aui-flex-item-4 aui-padded-10" style="position: relative;">
            <p><span>全部</span>(<span>0</span>)</p>
        </li>
        <li class="aui-flex-item-4 aui-padded-10" style="position: relative;">
            <p><span>好评</span>(<span>0</span>)</p>
        </li>
        <li class="aui-flex-item-4 aui-padded-10" style="position: relative;">
            <p><span>中评</span>(<span>0</span>)</p>
        </li>
        <li class="aui-flex-item-4 aui-padded-10" style="position: relative;">
            <p><span>差评</span>(<span>0</span>)</p>
        </li>
        <li class="aui-flex-item-4 aui-padded-10" style="position: relative;">
            <p><span>有图</span>(<span>0</span>)</p>
        </li>
    </ul>
</div>
<div class="aui-flex-item-12">
<ul class="aui-flex-row btn_comment">
    <li class="aui-margin-l-15">用户评论(0)</li>
    <li class="aui-margin-l-15">暂未评论</li>
    <li class="aui-flex-offset-4 goComment">查看所有评论</li>
</ul>
</div>
</section>
<footer class="aui-bar aui-bar-tab ">
      <div class="aui-bar-tab-item"  style="width: 3rem;">
        <i class="aui-iconfont aui-icon-comment aui-text-info"></i>
        <div class="aui-bar-tab-label aui-text-info">咨询</div>
    </div>
    <div class="aui-bar-tab-item"  style="width: 3rem;">
        <i class="aui-iconfont aui-icon-star aui-text-warning"></i>
        <div class="aui-bar-tab-label aui-text-warning">收藏</div>
    </div>
    <div class="aui-bar-tab-item aui-bg-warning aui-text-white"  style="width: auto;">加入购物车</div>
    <div class="aui-bar-tab-item aui-bg-danger aui-text-white goBuy"  style="width: auto;">立即购买</div>
</footer>

<script type="text/javascript" src="../../js/zepto.min.js"></script>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<script type="text/javascript" src="../../js/aui-slide.js"></script>
<script type="text/javascript" src="../../js/aui-tab.js"></script>
<script type="text/javascript" src="../../js/aui-actionsheet.js" ></script>
<script type="text/javascript" src="./js/lunbo_detail.js"></script>
<script type="text/javascript">
    var vltHome = new Vue({
        el:'#app',
        data:{},
        methods:{
            gohome:function(){//首页
                window.location.href = "../../index.html";
            }
        }
    });
//轮播
    apiready = function(){
        api.parseTapmode();
    }
    var tab = new auiTab({
        element:document.getElementById("tab")
    },function(ret){
        console.log(ret)
    });
    var slide2 = new auiSlide({
        container:document.getElementById("aui-slide2"),
        // "width":300,
        "height":240,
        "speed":300,
        "autoPlay": 0, //自动播放
        "pageShow":true,
        "loop":true,
        "pageStyle":'dot',
        'dotPosition':'center'
    })
//    底部菜单栏
    var tabfooter= new auiTab({
        element:document.getElementById("footer")
    },function(ret){
//	    	console.log(ret);
        if(ret){
//	            document.getElementById("demo").textContent = ret.index;
//	            if(ret.index == 2){
//	            	 window.location.href = "/vlth5/view/progress_check.html";
//	            }else if(ret.index == 3){
//	            	 window.location.href = "/vlth5/view/vlt_org.html";
//	            }
        }
    });

    var topDiv = new auiTab({
        element:document.getElementById("topDiv")
    },function(ret){
//	    	console.log(ret);
    });

    // 商品 评价 详情自动切换 事件
    $(function(){
      window.onscroll = function(){
          var height =  document.documentElement.scrollTop;
          if(height<=300){
              $("#xiangqing").removeClass("aui-active");
              $("#pingjia").removeClass("aui-active");
              $("#shangpin").addClass("aui-active");
          }else if(height<500 && height>300){
              $("#shangpin").removeClass("aui-active");
              $("#xiangqing").removeClass("aui-active");
              $("#pingjia").addClass("aui-active");
          }else{
              $("#shangpin").removeClass("aui-active");
              $("#pingjia").removeClass("aui-active");
              $("#xiangqing").addClass("aui-active");
          }
      }
    });
</script>
</body>
</html>